<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .wrap {
            margin: 20px;
        }

        .message-box {
            display: flex;

            .content {
                width: 320px;
                height: 45px;
                box-sizing: border-box;
                outline: none;
            }

            .btn {
                width: 80px;
                height: 45px;
            }
        }

        .message-list {
            line-height: 32px;
            font-size: 13px;

            & li {
                margin-top: 10px;
            }
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="message-box">
            <input class="content" type="text"><button class="btn">发送</button>
        </div>
        <ul class="message-list">
            <!-- <li></li> -->
        </ul>
    </div>
</body>
<script>

    var conInp = document.getElementsByClassName("content")[0];
    var btn = document.getElementsByClassName("btn")[0];
    var messageList = document.getElementsByClassName("message-list")[0];


    // 敏感词检测  => 输入的内容中是否存在敏感词
    // 敏感词过滤  => 把输入的敏感词替换为等量的星号


    var keyWordsList = ["菜逼","废物","CNM","NMD","SB"];

    // 点击发送
    btn.onclick = function () {
        // 输出的内容
        var content = conInp.value;
        content = content.replace(/\s/g, ""); // 

        // 敏感词过滤  => 把输入的敏感词替换为等量的星号
        // 一个一个进行替换

        for (var i = 0; i < keyWordsList.length; i++) { // 遍历敏感词列表
            var keyword = keyWordsList[i]; // 每一个敏感词

            var reg = new RegExp(keyword,"ig"); // 转化为正则表达式

            if (reg.test(content)) {  // 存在敏感词  => 替换

                var newStr = "";
                for(var j=0;j<keyword.length;j++){
                    newStr+= "*";
                }
                content = content.replace(reg,newStr);
            }
        }

       


        // 直接发送(输出)
        var li = document.createElement("li");
        li.textContent = content;
        // messageList.appendChild(li);
        messageList.prepend(li);
        conInp.value = "";
    }

    // 快捷键发送
    conInp.onkeydown = function (e) {
        var keyCode = e.keyCode;

        if (e.ctrlKey && keyCode == 13) {
            // var content = conInp.value;
            // content = content.replace(/\s/g, "");

            // var li = document.createElement("li");
            // li.textContent = content;
            // // messageList.appendChild(li);
            // messageList.prepend(li);


            // conInp.value = "";

            btn.onclick();
        }
    }


</script>

</html>